// 水波纹进度条
import QtQuick 2.15

Item {
    id: root
    
    property real value: 0
    property real minimum: 0
    property real maximum: 100
    property real progress: Math.max(0, Math.min(1, 1 - (value - minimum) / (maximum - minimum)))
    
    property bool isCircle: true
    property color waterColor: "#2B4AFF"
    property color backgroundColor: "#FFFFFF"
    property real backgroundOpacity: 0.2
    
    property real waveOffset: 0
    property real waveAmplitude: 0
    property real waveFrequency: 0.038
    
    onHeightChanged: {
        waveAmplitude = height * 0.05
    }
    
    Component.onCompleted: {
        waveAmplitude = height * 0.05
    }
    
    Timer {
        id: waveTimer
        interval: 80
        running: true
        repeat: true
        onTriggered: {
            waveOffset += 0.6
            if (waveOffset > width / 2) {
                waveOffset = 0
            }
        }
    }
    
    Canvas {
        id: canvas
        anchors.fill: parent
        
        onPaint: {
            if (width <= 0 || height <= 0) return
            
            var ctx = getContext("2d")
            if (!ctx) return
            
            ctx.clearRect(0, 0, width, height)
            
            // 绘制背景
            ctx.fillStyle = Qt.rgba(1, 1, 1, backgroundOpacity)
            ctx.beginPath()
            if (isCircle) {
                var side = Math.min(width, height)
                var centerX = width / 2
                var centerY = height / 2
                ctx.arc(centerX, centerY, side / 2, 0, 2 * Math.PI)
            } else {
                ctx.rect(0, 0, width, height)
            }
            ctx.fill()
            
            // 计算水位高度（注意：progress 已经是 1 - (value-min)/(max-min)）
            var waterLevel = height * progress
            
            // 创建裁剪路径（圆形或矩形）
            ctx.save()
            ctx.beginPath()
            if (isCircle) {
                var side = Math.min(width, height)
                var centerX = width / 2
                var centerY = height / 2
                ctx.arc(centerX, centerY, side / 2, 0, 2 * Math.PI)
            } else {
                ctx.rect(0, 0, width, height)
            }
            ctx.clip()
            
            // 创建渐变（从上到下：粉色到蓝色，与 C++ 版本一致）
            var gradient1 = ctx.createLinearGradient(0, 0, 0, height)
            gradient1.addColorStop(0.0, Qt.rgba(255/255, 66/255, 213/255, 0.4))  // 粉色，透明度100/255≈0.4
            gradient1.addColorStop(1.0, Qt.rgba(43/255, 74/255, 255/255, 0.4))   // 蓝色，透明度100/255≈0.4
            
            var gradient2 = ctx.createLinearGradient(0, 0, 0, height)
            gradient2.addColorStop(0.0, Qt.rgba(255/255, 66/255, 213/255, 0.7))  // 粉色，透明度180/255≈0.7
            gradient2.addColorStop(1.0, Qt.rgba(43/255, 74/255, 255/255, 0.7))   // 蓝色，透明度180/255≈0.7
            
            // 绘制第一个水波纹（使用渐变）
            ctx.fillStyle = gradient1
            ctx.beginPath()
            ctx.moveTo(0, height)
            
            for (var x = 0; x <= width; x += 1) {
                var y1 = waveAmplitude * Math.sin(waveFrequency * x + waveOffset) + waterLevel
                
                if (value === minimum) {
                    y1 = height
                }
                if (value === maximum) {
                    y1 = 0
                }
                
                ctx.lineTo(x, y1)
            }
            
            ctx.lineTo(width, height)
            ctx.closePath()
            ctx.fill()
            
            // 绘制第二个水波纹（相位差，使用渐变）
            ctx.fillStyle = gradient2
                ctx.beginPath()
            ctx.moveTo(0, height)
            
            for (var x2 = 0; x2 <= width; x2 += 1) {
                var phaseOffset = waveOffset + (width / 2 * waveFrequency)
                var y2 = waveAmplitude * Math.sin(waveFrequency * x2 + phaseOffset) + waterLevel
                
                if (value === minimum) {
                    y2 = height
                }
                if (value === maximum) {
                    y2 = 0
                }
                
                ctx.lineTo(x2, y2)
            }
            
            ctx.lineTo(width, height)
            ctx.closePath()
            ctx.fill()
            
            ctx.restore()
            
            // 绘制文字
            ctx.fillStyle = "white"
            var fontSize = Math.max(12, width / 8)
            ctx.font = fontSize + "px Arial"
            ctx.textAlign = "center"
            ctx.textBaseline = "middle"
            ctx.fillText(Math.round(value) + "%", width / 2, height / 2)
        }
        
        onWidthChanged: {
            if (width > 0 && height > 0) {
                requestPaint()
            }
        }
        onHeightChanged: {
            if (width > 0 && height > 0) {
                requestPaint()
            }
        }
    }
    
    onProgressChanged: {
        if (canvas.width > 0 && canvas.height > 0) {
            canvas.requestPaint()
        }
    }
    onWaveOffsetChanged: {
        if (canvas.width > 0 && canvas.height > 0) {
            canvas.requestPaint()
        }
    }
}

